<!--
  工作台->计划工单->计划工单监控->巡视设备列表->通信光缆详情
-->
<template>
  <div class="cable-detail-wrap">
    <nav-bar class="header" back title="通信光缆详情" @goBack="goBack" />
    <!-- 光缆状态 -->
    <div class="cable-state">
      <div class="cable-state-title">完成状态</div>
      <div class="cable-state-text cable-state-on" v-if="tourState ==='0'">未完成</div>
      <div class="cable-state-text cable-state-off" v-else>已完成</div>
    </div>

    <!-- 切换tab -->
    <div class="cable-info-tab" >
      <div class="info-tab-item"
           :class="currentTab === 'cable' ? ' info-tab-current': ''"
           @click="tabChange('cable')">光缆信息</div>
      <div class="info-tab-item"
           :class="currentTab === 'fibre' ? ' info-tab-current': ''"
           @click="tabChange('fibre')">纤芯信息</div>
    </div>

    <!-- 光缆信息 -->
    <div class="cable-info" v-if="currentTab === 'cable'">
      <plateTitle title="光缆信息" class="plate-title-1" />
      <view class="cable-info-container">
        <van-cell-group>
          <van-cell v-for="(item, index) in cableInfoData" :title="item.title" :key="index" :value="item.value" />
        </van-cell-group>
      </view>

      <plateTitle title="巡视信息" :isRequired="false" class="plate-title-1" />

      <!-- 巡视照片 -->
      <view class="patrol-info-container">
        <view>巡视照片</view>
        <van-divider dashed />
        <div v-if="files.filter(item => item.img).length === 0" style="text-align: center;">暂无数据</div>
        <div v-else class="image-wrap">
          <div class="image-list">
            <div
              class="upload-button"
              v-for="(imgItem, index) in files"
              v-if="imgItem.img"
              :style="{'background-image': `url(${imgItem.bgImg})`}"
            >
              <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgItem, index, 'PREVIEW')">
            </div>
          </div>
        </div>
      </view>

      <!-- 备注 -->
      <view class="remark-info-container">
        <view>备注</view>
        <van-divider dashed />
        <div class="remark-wrap">
          <textarea class="remark-text" disabled :value="textareaValue">
          </textarea>
        </div>
      </view>

      <!-- 巡视结果 -->
      <view class="result-info-container">
        <van-cell-group>
          <van-cell v-for="(item,index) in resultInfoData" :title="item.title" :value="item.value" :class="item.color" :key="index" />
        </van-cell-group>
      </view>

    </div>

    <!-- 纤芯信息 -->
    <div class="fibre-info" v-else>
      <div class="fibre-basic-info">
        <div class="fibre-rate">
          <!-- 进度条 -->
          <div class="progress-bar">
            <div class="bar-title">已完成</div>
            <div class="bar-chart">
              <div class="bar-chart-off" :style="{width: (examState.VER / examState.TOTAL) * 100 + '%'}"></div>
            </div>
            <div class="bar-text">
              <span class="bar-off">{{examState.VER}}/</span>
              <span class="bar-all">{{examState.TOTAL}}</span>
            </div>
          </div>
        </div>
        <!-- 统计信息 -->
        <div class="fibre-rate-info" v-if="tourState != '0'">
          <div class="info-item">
            <div class="value">{{examState.FREE}}</div>
            <div class="label">空余纤芯</div>
          </div>
          <div class="info-item">
            <div class="value">{{examState.FREE_RATE}}</div>
            <div class="label">纤芯空闲率</div>
          </div>
          <div class="info-item">
            <div class="value">{{examState.USED}}</div>
            <div class="label">已使用纤芯</div>
          </div>
          <div class="info-item">
            <div class="value">{{examState.USED_RATE}}</div>
            <div class="label">纤芯使用率</div>
          </div>
        </div>
      </div>

      <div class="fibre-content-title">
        <plateTitle title="纤芯列表">
          <div class="condition-bar" v-if="tourState == '0'">
            <!-- <div class="condition-item condition-item-checked"  :data-index="0">全部 {{examCount.TOTAL}}</div>
            <div class="condition-item" :data-index="1">未核查 {{examCount.NOT_VER}}</div>
            <div class="condition-item" :data-index="2">已核查 {{examCount.VER}}</div> -->
            <div v-for="(item, index) in listTypes" @click.self="handleListType(index)" :class="['condition-item', typeIndex==index?'condition-item-checked':''] " :key="index" :data-index="index">
              {{item.name}}
              {{examCount[item.key]}}</div>
          </div>
        </plateTitle>
      </div>

      <!-- <div class="fibre-pair-list">
        <div class="fibre-pair-item" v-for="(item, index) in examList2" :key="index">
          <div class="replace-index">{{item.CORE_NAME}}</div>
          <div class="replace-text">{{item.LIGHT_NAME}}</div>
          <div class="replace-state"
            @click="jump(item)"
           :class="item.TOUR_STATE===0 ? 'replace-state-off' : 'replace-state-on'">{{item.TOUR_STATE_NAME}}</div>
        </div>
      </div> -->
<!-- v-for="(item, index) in fiberDetail.fiber_exam_list" -->
      <div class="fibre-pair-list">
				<div class="fibre-pair-item"
					 v-for="(item, index) in examList2"  :key="index">
					<div class="fibre-pair-detail">
						<div class="replace-index">{{item.CORE_NAME}}</div>
						<div class="replace-text">
							{{item.IS_OCCUPY === '6' ? '纤芯保护': (item.IS_OCCUPY === '5' ? '未占用' : item.ISOCCUTYNAME)}}</div>
						<div class="replace-state" @click="jump(item)"
							:class="item.TOUR_STATE===0 ? 'replace-state-off' : 'replace-state-on'">
							{{item.TOUR_STATE_NAME}}</div>
					</div>

					<hr class="replace-hr">
					<view class="top-replace-main" v-if="item.LENGTH">
						<text class="replace-big-ltitle">测试长度（KM）:</text>
						<text class="replace-small-ltitle">{{ item.LENGTH }}</text>
					</view>
					<view class="top-replace-main" v-if="item.LOSS">
						<text class="replace-big-ltitle">全程总损耗:</text>
						<text class="replace-small-ltitle">{{ item.LOSS }}</text>
					</view>
					<view class="top-replace-main" v-if="item.LIGHT_NAME">
						<text class="replace-big-ltitle">光路:</text>
						<text class="replace-small-ltitle">{{ item.LIGHT_NAME }}</text>
					</view>
					<view class="top-replace-main" v-if="item.LABEL">
						<text class="replace-big-ltitle">标签:</text>
						<text class="replace-small-ltitle">{{ item.LABEL }}</text>
					</view>
				</div>

			</div>

      <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
        <van-swipe>
          <div v-for="(image, index) in files" :key="index">
            <van-swipe-item v-if="image.img" style="text-align: center;">
              <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
              <img :src="image.img" />
            </van-swipe-item>
          </div>
        </van-swipe>
      </van-popup>
    </div>
  </div>
</template>

<script>
import config from '../../../../../common/config'
import navBar from '../../../../../components/common/nav-bar'
import plateTitle from '../../../../../components/business/plateTitle.vue'
let fileTemplate = [
  {
    name: "EQUIPMENT.jpg",
    previewName: "设备照片",
    type: "EQUIPMENT",
    bgImg: require("../../../../../static/img/bg_shebei.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "NAMEPLATE.jpg",
    previewName: "铭牌照片",
    type: "NAMEPLATE",
    bgImg: require("../../../../../static/img/bg_mingpai.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "OTHER.jpg",
    previewName: "其他照片",
    type: "OTHER",
    bgImg: require("../../../../../static/img/bg_qita.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];
export default {
  name: 'cableDetail', // 通信光缆详情
  data() {
    return {
      taskType:'',
      currentTab: 'cable', // 当前显示内容cable / fibre 纤芯
      completeState: '',
      files: fileTemplate,
      showPreview: false,
      textareaValue: '',
      taskResult: '',
      cableInfoData: [],
      resultInfoData: [],
      taskColors: [
        {
          name: '一致',
          color: 'blue'
        },
        {
          name: '不存在',
          color: 'red'
        },
        {
          name: '新增',
          color: 'green'
        },
        {
          name: '更新',
          color: 'yellow'
        }
      ],
      tourState: 0,
      taskState: 0,
      examList: [],
      examList2: [],
      typeIndex: 0,
      examState: {},
      examCount: {},
      listTypes: [
        {
          name: '全部',
          key: 'TOTAL'
        },
        {
          name: '未核查',
          key: 'NOT_VER'
        },
        {
          name: '已核查',
          key: 'VER'
        }
      ]
    }
  },
  components: {
    navBar,
    plateTitle
  },
  onLoad(e) {
    this.objId = e.id
    this.tourState = e.tourState
    this.taskState = e.taskState
    this.taskStateName = e.taskStateName
    this.taskType = e.taskType
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
    this.getFiberMsgLineExam()
  },
  methods: {
    tabChange(currentTab) {
      this.currentTab = currentTab;
      if (currentTab === 'cable') {
        // this.getFiberMsgLineExam()
      } else if (currentTab === 'fibre') {
        if (this.tourState == 0) {
          this.getLineMsgLineExam()
        } else {
          this.getLineExamAccomplish()
        }
      }
    },
    // 获取纤芯信息（已完成）
    getLineExamAccomplish() {
      let parasm = {
        fiber_exam_id: this.objId
      }
      this.$api.getLineExamAccomplish(parasm).then(res => {
        this.examList = res.data.fiber_exam_list
        this.examList2 = this.examList
        this.examCount = res.data.fiber_exam_count
        this.examState = res.data.fiber_exam_state
      })
    },
    // 获取纤芯信息(未完成)
    getLineMsgLineExam() {
      let parasm = {
        fiber_exam_id: this.objId
      }
      this.$api.getLineMsgLineExam(parasm).then(res => {
        this.examList = res.data.fiber_exam_list
        this.examList2 = this.examList
        this.examCount = res.data.fiber_exam_count
        this.examState = res.data.fiber_exam_state
      })
    },
    // 点击纤芯核查状态跳转
    jump(fiberInfo) {
        uni.navigateTo({
          url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberDetail?fiberInfo=${JSON.stringify(fiberInfo)}`
        })
    },
    // 获取光缆信息详情
    getFiberMsgLineExam() {
      let parasm = {
        fiber_exam_id: this.objId
      }
      this.$api.getFiberMsgLineExam(parasm).then(res => {
        // this.completeState = res.data.tourState == 1 ? '已完成' : '未完成'
        this.cableInfoData = [
          {
            title: '光缆名称',
            value: res.data.fiberMsg.NAME
          },
          {
            title: '起点名称',
            value: res.data.fiberMsg.A_SITE_NAME
          },
          {
            title: '终点名称',
            value: res.data.fiberMsg.Z_SITE_NAME
          },
          {
            title: '电压等级',
            value: res.data.fiberMsg.VOLTAGE_CLASS
          },
          {
            title: '光缆顺序',
            value: res.data.fiberMsg.OPTICALORDER
          },
          {
            title: '光缆种类',
            value: res.data.fiberMsg.FIBER_TYPE
          },
          {
            title: '所属线路',
            value: res.data.fiberMsg.POWER_LINE
          },
          {
            title: '长度(Km)',
            value: res.data.fiberMsg.LENGTH
          },
          {
            title: '纤芯总数',
            value: res.data.fiberMsg.LINE_NUMBER
          },
          {
            title: '运行状态',
            value: res.data.fiberMsg.RUN_STATE
          }
        ]
        this.textareaValue = res.data?.fiber_exam_msg?.REMARK
        this.resultInfoData = [
          {
            title: '巡视结果',
            value: res.data.fiber_exam_msg.XSJG,
            color: this.taskColors.filter(
              item => item.name == res.data.fiber_exam_msg.XSJG
            )[0].color
          },
          {
            title: '巡视人',
            value: res.data.fiber_exam_msg.TOUR_OPER_NAME
          },
          {
            title: '巡视时间',
            value: res.data.fiber_exam_msg.TOUR_TIM
          }
        ]
        this.files = this.files.map((item) => {
          return {
            ...item,
            img: res.data.fiberMsg.photoMap[item.type] ? this.baseUrl + res.data.fiberMsg.photoMap[item.type]: '',
          }
        })
      })
    },
    imageHandle (imgItem, imgIndex, handleType) {
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgItem, imgIndex);
      } else if (handleType === 'PREVIEW') {
        this.showPreview = true;
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          message: `是否确认删除${imgItem.previewName}`
        })
          .then(() => {
            this.$set(this.files, imgIndex, {
              ...this.files[imgIndex],
              raw: null,
              img: ''
            })
            this.delList.includes(imgItem.type) ? null: this.delList.push(imgItem.type);
              console.log(this.delList, "delete")

          })
          .catch(() => {
            // on cancel
          })
      }
    },
    goBack() {
      uni.navigateBack()
    },
    handleListType(e) {
      this.typeIndex = e
      switch (e) {
        case 0:
          this.examList2 = this.examList
          break
        case 1:
          this.examList2 = this.examList.filter(item => item.TOUR_STATE == 0)
          break
        case 2:
          this.examList2 = this.examList.filter(item => item.TOUR_STATE != 0)
          break
        default:
          this.examList2 = this.examList
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.cable-detail-wrap {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(242,246,250,1);

  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }
  
  .cable-state{
    width: 100vw;
    height: px2vh(140);
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 px2vw(30) 0 px2vw(49);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cable-state-title {
      font-size: px2vw(42);
    }
    .cable-state-text {
      width: px2vw(220);
      height: px2vh(80);
      border-radius: px2vw(40);
      font-size: px2vw(42);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      &.cable-state-on {
        color: rgba(255,67,85,1);
        background-color: rgba(255,67,85,0.1);
      }
      
      &.cable-state-off {
        color: rgba(65,220,131,1);
        background-color: rgba(65,220,131,0.1);
      }
    }
  }
  
  .cable-info-tab {
    width: calc(100% - #{px2vw(60)});
    height: px2vh(120);
    border-radius: px2vw(20);
    box-sizing: border-box;
    margin: px2vh(40) px2vw(30) px2vh(30);
    padding: 0 px2vw(10);
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .info-tab-item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(51,51,51,1);
      font-size: px2vw(38);
      &.info-tab-current {
        height: px2vh(100);
        //margin-right: px2vw(10);
        border-radius: px2vw(20);
        background-color: rgba(65,122,220,1);
        color: rgba(255,255,255,1);
        font-weight: Bold;
      }
    }
  }
  
  .cable-info {
    width: calc(100% - #{px2vw(60)});
    height: calc(100vh - #{px2vh(523)});
    margin: auto;
    padding-bottom: px2vh(30);
    overflow: auto;
    
    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }
    
    .cable-info-container, .result-info-container {
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
    }
    
    .result-info-container {
      .yellow {
        /deep/.van-cell__value {
          color: #FFAD0E;
        }
      }
      .blue {
        /deep/.van-cell__value {
          color: #417ADC;
        }
      }
      .green {
        /deep/.van-cell__value {
          color: #41DC83;
        }
      }
      .red {
        /deep/ .van-cell__value {
          color: #FF4355;
        }
      }
    }
    
    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);
      
      .remark-wrap {
        background-color: #FAFAFA;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);
        
        .remark-text {
          height: px2vh(150);
        }
      }
    }
    
    .patrol-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      
      /deep/ .van-radio {
        margin-right: px2vw(139.5)
      }
      
      .image-wrap {
        width: 100%;
        display: flex;
        
        img {
          width: px2vw(215);
          height: px2vw(215);
          margin-right: px2vw(40);
          border-radius: px2vw(6);
        }
        
        .image-list {
          width: 100%;
          display: flex;
          .upload-button {
            width: px2vw(215);
            height: px2vw(215);
            background-size: cover;
            margin-right: px2vw(40);
            position: relative;
            .delete-icon {
              position: absolute;
              top: px2vw(-20);
              right: px2vw(-20);
              width: px2vw(40);
              height: px2vw(40);
              background-color: rgba(0, 0, 0, 0.7);
              border-radius: 50%;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }
  
  .fibre-info {
    height: calc(100vh - #{px2vh(523)});
    overflow: auto;
    .fibre-rate {
      width: calc(100% - #{px2vw(60)});
      //height: px2vh(140);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(30);
      background-color: #ffffff;
      overflow: hidden;
      
      .progress-bar {
        height: px2vh(140);
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .bar-title {
          font-size: px2vw(42);
          color: rgba(65,122,220,1);
          margin-left: px2vw(40);
        }
        
        .bar-chart {
          width: px2vw(660);
          height: px2vh(34);
          margin: 0 px2vw(27) 0 px2vw(30);
          background-color: #ECF1FB;
          .bar-chart-off {
            //width: 75%;
            height: 100%;
            background: repeating-linear-gradient(135deg, #417ADC, #417ADC #{px2vw(16)},#B3CAF1 #{px2vw(16)}, #B3CAF1 #{px2vw(32)});
          }
        }
        
        .bar-text {
          font-size: px2vw(42);
          margin-right: px2vw(40);
          font-weight: bold;
          color: #7C7C7C;
          .bar-off {
            color: #417ADC;
          }
        }
      }
    }
    .fibre-rate-info {
      //margin: 0 auto px2vh(40);
      margin: 0 auto px2vh(60);
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: px2vh(54) px2vw(70);
      width: calc(100% - #{px2vw(60)});
      font-size: px2vw(40);
      border-radius: px2vw(20);
      overflow: hidden;
      background-color: #FFFFFF;
      
      .info-item {
        .value {
          margin-bottom: px2vh(26);
          font-size: px2vh(54);
          font-weight: 700;
          color: #417adc;
          text-align: center;
        }
        .label {
          font-size: px2vh(36);
          font-weight: bold;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
  
  .fibre-content-title {
    width: calc(100% - #{px2vw(80)});
    box-sizing: border-box;
    margin: px2vh(0) px2vw(40) px2vh(18);
    .condition-bar {
      display: flex;
      justify-content: center;
      .condition-item {
        height: px2vh(56);
        background-color: rgba(65,122,220,0.1);
        border: #{px2vw(2)} solid rgba(65,122,220,1);
        color: rgba(65,122,220,1);
        border-radius: px2vw(6);
        font-size: px2vw(30);
        padding: 0 px2vw(16) 0 px2vw(19);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 px2vw(5);
        &:last-child {
          margin-right: 0;
        }
        &.condition-item-checked {
          background-color: rgba(65,122,220,1);
          color: rgba(255,255,255,1);
        }
      }
    }
  }
  
  .fibre-pair-list {
    height: calc(100vh - #{px2vh(613)});
    overflow: auto;
 .fibre-pair-item {
				width: calc(100% - #{px2vw(60)});
				border-radius: px2vw(20);
				box-sizing: border-box;
				margin: px2vh(40) px2vw(30) px2vh(40);
				padding: 8px 0;
				background-color: #ffffff;

				.fibre-pair-detail {
					min-height: px2vh(140);
					display: flex;
					justify-content: space-between;
					align-items: center;

					.replace-index {
						margin: 0 px2vw(28) 0 px2vw(40);
						width: px2vw(64);
						height: px2vw(64);
						border-radius: 50%;
						background: radial-gradient(circle at center, #417ADC, #417ADC #{px2vw(23)}, #ffffff #{px2vw(23)}, #ffffff #{px2vw(26)}, #417ADC #{px2vw(26)}, #417ADC 100%);
						color: #ffffff;
						font-size: px2vw(36);
						font-weight: bold;
						display: flex;
						justify-content: center;
						align-items: center;
					}


					.replace-text {
						width: px2vw(645);
						font-size: px2vw(46);
						font-weight: bold;
						color: #666666;
					}

					.replace-state {
						font-size: px2vw(42);
						margin-right: px2vw(39);

						&.replace-state-on {
							color: #41DC83;
						}

						&.replace-state-off {
							color: #FF4355;
						}
					}
				}


				.replace-hr {
					width: px2vw(940);
					border: px2vh(1) solid #e5e5e5;
					margin-left: px2vw(40);
					margin-bottom: px2vh(42);
				}

				.top-replace-main {
					width: px2vw(900);
					font-size: px2vh(36);
					line-height: px2vh(62);
					margin-left: px2vw(60);

					.replace-big-ltitle,
					.replace-big-rtitle {
						color: #666;
					}

					.replace-small-ltitle,
					.replace-small-rtitle {
						margin-left: px2vw(25);
						color: #333;
					}

					.replace-big-rtitle {
						margin-left: px2vw(245);
					}
				}
			}
  }
}
</style>